@import "./common";

@function getvw($w) {
    @return($w/1920)*100+vw;
}

;

.box {
    .center {
        width: 100%;
        max-width: getvw(1920);
        margin: 0 auto;
        min-width: getvw(900);

        .nav {
            .nav_right {
                ul {
                    li:nth-of-type(2) {
                        height: 65px;
                    text-align: center;
                    line-height: 65px;
                    border-bottom: 1px solid #19bc64;
                        a {
                            color: #19bc64;
                        }
                    }
                }
            }
        }

        .banner {
            width: 100%;
            height: getvw(625);
            img{
                width: 100%;
            }
        }

        .banner_bottom {
            width: 100%;
            height: getvw(680);

            .banner_bottom_title {
                p:nth-of-type(1) {
                    font-weight: 100;
                    font-size: 36px;
                    text-align: center;
                    color: #999999;
                }

                p:nth-of-type(2) {
                    font-size: 24px;
                    text-align: center;
                    color: #999999;
                    position: relative;
                }

                p:nth-of-type(2)::after {
                    content: '';
                    width: getvw(54);
                    height: getvw(1);
                    position: absolute;
                    top: getvw(20);
                    left: getvw(830);
                    background-color: #999999;
                }

                p:nth-of-type(2)::before {
                    content: '';
                    width: getvw(54);
                    height: getvw(1);
                    position: absolute;
                    top: getvw(20);
                    right: getvw(830);
                    background-color: #999999;
                }
            }
            .banner_bottom_main{
                display: flex;
                width: getvw(1070);
                height: getvw(470);
                margin: 0 auto;
                margin-top: getvw(45);
                justify-content: space-between;
                align-items: center;

                img{
                    width: getvw(423);
                    height: getvw(472);
                }
                .banner_bottom_main_text{
                    width: getvw(570);
                    height: getvw(415);

                    p:nth-of-type(1){
                        color: #19bc64;
                        font-size: getvw(36);
                        font-weight: 100;
                        margin-left: getvw(40);
                    }
                    p:nth-of-type(2){
                        color: #666666;
                        font-size: getvw(24);
                        margin:getvw(33) getvw(0) getvw(33) getvw(40);
                    }
                    p:nth-of-type(3){
                        color: #ba7f04;
                        font-size: getvw(16);
                        margin-left:getvw(40);
                        line-height: getvw(30);
                    }
                }
            }

        }

        .cultural_product{

            .cultural_product_title {
                p:nth-of-type(1) {
                    font-size: 36px;
                    font-weight: 100;
                    text-align: center;
                    color: #999999;
                }

                p:nth-of-type(2) {
                    font-size: 24px;
                    text-align: center;
                    color: #999999;
                    position: relative;
                }

                p:nth-of-type(2)::after {
                    content: '';
                    width: getvw(54);
                    height: getvw(1);
                    position: absolute;
                    top: getvw(20);
                    left: getvw(830);
                    background-color: #999999;
                }

                p:nth-of-type(2)::before {
                    content: '';
                    width: getvw(54);
                    height: getvw(1);
                    position: absolute;
                    top: getvw(20);
                    right: getvw(830);
                    background-color: #999999;
                }
            }
            .cultural_product_main{
                width: 100%;
                height: getvw(700);
                margin-top: getvw(43);
                position: relative;
                img{
                    width: 100%;
                }
            
                div{
                    width: getvw(485);
                    height: getvw(376);
                    background-color: white;
                    position: absolute;
                    top: getvw(130);
                    right: getvw(350);
                    p:nth-of-type(1){
                        color: #19bc64;
                        font-size: getvw(36);
                        font-weight: 100;
                        margin:getvw(30) 0 getvw(50)  getvw(40);
                    }
                    p:nth-of-type(2){
                        font-size: getvw(16);
                        letter-spacing: getvw(2);
                        color: #666666;
                        margin:0 getvw(40);
                        line-height: getvw(27);
                    }
                }
            }
        }

        .development{
            width: 100%;
            .development_title {
                p:nth-of-type(1) {
                    font-size: 36px;
                    font-weight: 100;
                    text-align: center;
                    color: #999999;
                }

                p:nth-of-type(2) {
                    font-size: 24px;
                    text-align: center;
                    color: #999999;
                    position: relative;
                }

                p:nth-of-type(2)::after {
                    content: '';
                    width: getvw(54);
                    height: getvw(1);
                    position: absolute;
                    top: getvw(20);
                    left: getvw(830);
                    background-color: #999999;
                }

                p:nth-of-type(2)::before {
                    content: '';
                    width: getvw(54);
                    height: getvw(1);
                    position: absolute;
                    top: getvw(20);
                    right: getvw(830);
                    background-color: #999999;
                }
            }

            .development_main{
                width: getvw(1210);
                height: getvw(240);
                margin: 0 auto;
                display: flex;
                justify-content: space-between;
                align-items: center;

                div{
                    width: getvw(270);
                    height: getvw(135);
                    position: relative;

                    p:nth-of-type(1){
                        color: #666666;
                        font-size: getvw(18);
                    }
                    p:nth-of-type(2){
                        margin: getvw(10) getvw(10);
                        color: #999999;
                        font-size: getvw(16);
                        line-height: getvw(24);
                    }
                }
                div::after{
                    content: '';
                    width: getvw(270);
                    height: getvw(1);
                    position: absolute;
                    background-color: #666666;
                    top: getvw(27);
                    left: 0;
                }

                i{
                    font-size: getvw(60);
                    color: #acabab;
                    font-weight: 100;
                }
            }
        }
    }
}